
<script>
import draggableItem from './draggableItem.vue';
import siteOptions from './siteOptions';
export default {
  name: 'siteComponent',
  mixins: [siteOptions],
  components: {
    draggableItem
  },
  props: {
    params: Object,
    activeId: [String, Number]
  },
  render() {
    const {
      params,
      activeId,
      field,
      config,
      options,
      slot,
      componentName,
      copy,
      remove,
      changeComponent,
      getStyle
    } = this;
    const Tag = config.tag;
    let slotConent = '';
    let slotTag = (slot && slot.tag) || '';
    const draggableItem = (
      <draggable-item
        {...{
          attrs: {
            params,
            activeId,
            cardStyle:
              componentName === 'cardComponent'
                ? getStyle(options.cardStyle)
                : {}
          },
          on: {
            changeComponent,
            remove,
            copy
          }
        }}
      ></draggable-item>
    );
    switch (componentName) {
      case 'inputTextarea':
        options.autosize = options.autosizeAuto || options.autosize;
        break;
      case 'inputComponent':
        slotConent = (
          <span>
            <template slot="prepend">{slot.prepend}</template>
            <template slot="append">{slot.append}</template>
          </span>
        ).children;
        break;
      case 'cardComponent':
        slotConent = (
          <div>
            {slot.left ? (
              <template slot="left">
                {slot.left.map((item) => {
                  return (
                    <item.tag
                      style="margin-left:5px"
                      v-model={item.vModel}
                      {...{ attrs: { ...item.options } }}
                    >
                      {item.text || ''}
                    </item.tag>
                  );
                })}
              </template>
            ) : (
              ''
            )}
            {slot.right ? (
              <template slot="right">
                {slot.right.map((item) => {
                  return (
                    <item.tag
                      style="margin-left:5px"
                      v-model={item.vModel}
                      {...{ attrs: { ...item.options } }}
                    >
                      {item.text || ''}
                    </item.tag>
                  );
                })}
              </template>
            ) : (
              ''
            )}
            <template slot="content">
              <el-row>{draggableItem}</el-row>
            </template>
          </div>
        ).children;
        break;
    }
    if (componentName !== 'cardComponent') {
      slotConent = slotTag
        ? slot.options.map((item) => {
            return (
              <slotTag {...{ attrs: item }}>
                {slotTag === 'el-option' ? item.label : item.value}
              </slotTag>
            );
          })
        : slotConent;
    }
    if (Tag === 'echarts-component') {
      options.componentName = componentName;
      options.echartsOptions = this.echartsOptions;
    }
    const TagItem = (
      <Tag
        {...{ attrs: { ...options, style: '' } }}
        cardStyle={
          componentName === 'cardComponent' ? getStyle(options.cardStyle) : ''
        }
        v-model={this.vModel}
        style={getStyle(options.style)}
      >
        {componentName === 'buttonComponent' ? options.text : ''}
        {slotConent}
      </Tag>
    );
    let resultTag = null;
    if (componentName === 'rowComponent') {
      resultTag = (
        <el-row
          {...{ attrs: { ...options, style: '' } }}
          v-model={this.vModel}
          style={getStyle(options.style)}
        >
          {draggableItem}
        </el-row>
      );
    } else {
      resultTag = (
        <el-form-item
          label={config.showLabel ? config.label : ''}
          label-width={
            config.labelWidth > 0 && config.showLabel
              ? config.labelWidth + 'rem'
              : '0'
          }
          class={[
            'tag-item',
            { active: params.id === activeId && config.tag !== 'el-row' },
            +{ 'active-hover': config.tag !== 'el-row' },
            { 'row-active-hover': config.tag === 'el-row' }
          ]}
        >
          {TagItem}
        </el-form-item>
      );
    }

    return resultTag;
  }
};
</script>
<style lang="scss" scoped>
.tag-item {
  display: flex;
  .active-hover:hover {
    background-color: #f6f7ff;
  }
  &.row-active-hover:hover .el-row {
    border-color: #409eff;
  }
  ::v-deep {
    .el-form-item__content {
      display: flex;
      width: 100%;
    }
  }
}
</style>